<template>
<div id="papersedit">
    <el-card>
        <div slot="header">
            <span>编辑</span>
        </div>
        <el-form :model="formData" ref="formData" label-position="left" label-width="80px">
            <el-form-item label="标题">
                <el-input v-model="formData.title"></el-input>
            </el-form-item>
            <el-form-item label="大纲">
                <el-tree node-key="id" ref="tree" :render-after-expand="false" @check-change="selectNode" show-checkbox :data="outlinesList" :props="{
          children:'children',label:'text'
        }"></el-tree>
            </el-form-item>
            <el-form-item label="选项">
                <el-select v-model="formData.item_id">
                    <el-option v-for="item in itemsList" :key="'item'+item.id" :label="item.text" :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="班级">
                <el-select v-model="formData.classes_id">
                    <el-option v-for="item in classesList" :key="'item'+item.id" :label="item.classname" :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="save">保存</el-button>
            </el-form-item>
        </el-form>

    </el-card>
</div>
</template>

<script>
export default {
    props: ["id"],
    data() {
        return {
            // paperList: {},
            outlinesList: [],
            itemsList: [],
            classesList: [],
            formData: {
                title: "",
                content: [],
                item_id: "",
                classes_id: ""
            }
        };
    },
    created() {
        this.getOutlinesList()
        this.getItemsList()
        this.getClassesList() 
    },
    mounted() {
        this.getPaperList();
    },
    methods: {
        // 保存按钮
        save() {
            this.$http.post("/papers/edit", this.$qs.stringify({
                id:this.id,
                title: this.formData.title,
                classes_id: this.formData.classes_id,
                item_id: this.formData.item_id,
                content: JSON.stringify(this.formData.content)
            })).then(result => {
                this.$router.push({
                    name: 'paperslist'
                })
            })
        },
        // 选择状态
        selectNode(data, isSelect) {
            if (data.children.length > 0) {
                return
            }
            if (isSelect) {
                this.formData.content.push(data)
            } else {
                var index = this.formData.content.indexOf(data)
                this.formData.content.splice('index', 1)
            }
        },
        // 获取班级信息
        getClassesList() {
            this.$http.get("/classes/list").then(result => {
                this.classesList = result.data.data
                // console.log(this.classesList)
            });
        },
        // 获取大纲信息
        getOutlinesList() {
            this.$http.get("/outlines/list").then(result => {
                this.outlinesList = this.$tree(result.data.data)
                // console.log(this.outlinesList)
            });
        },
        // 获取选项信息
        getItemsList() {
            this.$http.get("/items/list").then(result => {
                this.itemsList = this.$tree(result.data.data)
            });
        },
        // 获取问卷信息
        getPaperList() {
            this.$http
                .get("/papers/one", {
                    params: {
                        id: this.id
                    }
                })
                .then(result => {
                    if (result.data.error == 4) {
                        this.$router.push("/login");
                     }
                    result.data.data.item_id = JSON.parse(result.data.data.item_id);
                    result.data.data.content = JSON.parse(result.data.data.content);
                    this.formData.title = result.data.data.title;
                    this.formData.item_id = +result.data.data.item_id;
                    this.formData.classes_id = +result.data.data.classes_id;
                    this.$refs.tree.setCheckedNodes(result.data.data.content);
                    console.log(result.data.data.content)
                });
        }
    }
};
</script>
